<template>
  <div class="ana-box">
    <dl>
      <dt>正确答案</dt>
      <dd>
        <template v-if="questionType === 1 || questionType === 2 || questionType === 4">{{answer}}</template>
        <template v-if="questionType === 3">
          <p v-for="(item, index) in answer" :key="index">{{(index + 1 ) + '.' + item}}</p>
        </template>
        <template v-if="questionType === 5">
          <el-button type="primary" class="btn-code" @click="handleViewCode(analysisData.lang, answer)">查看代码</el-button>
        </template>
      </dd>
      <dt>解析</dt>
      <dd>{{analysisData.analysis}}</dd>
    </dl>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import {PROGRAMURL} from '@/utils/constants';

@Options({
  props: {
    analysisData: Object,
    questionType: Number,
    lang: Number
  },
  watch: {
    analysisData() {
      this.handleAnswer();
    }
  }
})
export default class Analysis extends Vue {
  analysisData: ObjectT = {};
  questionType = 0;
  answer!: any;
  lang!: number;
  token = localStorage.getItem('token');
  PROGRAMURL = PROGRAMURL;
  // 答案根据题目类似做处理
  handleAnswer() {
    const answer = this.analysisData.ans;
    switch (this.questionType) {
      case 1:
      case 4:
      case 5:
        this.answer = answer;
        break;
      case 2:
        this.answer = answer.split('|').join('');
        break;
      case 3:
        this.answer = answer.split('|');
        break;
      default:
        break;
    }
  }
  // 获取编程题类型名称
  getLangName() {
    let langName = '';
    switch (this.lang) {
      case 2:
        langName = 'scratch';
        break;
      case 3:
        langName = 'python';
        break;
      default:
        break;
    }
    return langName;
  }
  // 查看代码
  handleViewCode(lang: number, ans: string) {
    const langName = this.getLangName();
    const url = `${PROGRAMURL}${langName}/?token=${this.token}${ans ? `&codeUrl=${ans}` : ''}`
    window.open(url, '_blank');
  }
}
</script>

<style scoped lang="scss">
.ana-box {
  box-sizing: border-box;
  height: 280px;
  padding: 23px 42px 0;
  overflow: auto;
  background: $bg-color-purle;
  dt {
    font-size: 16px;
    color: $text-black;
    font-weight: bold;
    margin-bottom: 10px;
  }
  dd {
    font-size: 16px;
    color: $text-black;
    line-height: 28px;
    margin-bottom: 22px;
  }
  .btn-code {
    width: 77px;
    height: 34px;
    padding: 0;
    min-height: auto;
    border-radius: 5px;
    font-size: 14px;
  }
}
</style>
